import React from 'react';
import { Rate, DatePicker, message } from 'antd';

const desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];


class App extends React.Component {
  state = {
    date: null,
    value: 3,
  };
  add = () => {
    this.props.increment(1)
  }
  de = () => {
    this.props.decrement(1)
  }
  asyncAdd = () => {
    this.props.asyncIncrement(1)
  }
  asyncDe = () => {
    this.props.asyncDecrement(1)
  }
  handleChangeRate = value => {
    this.setState({ value });
  };
  handleChange = date => {
    message.info(`您选择的日期是: ${date ? date.format('YYYY-MM-DD') : '未选择'}`);
    this.setState({ date });
  };
  render() {
    const { date } = this.state;
    const { value } = this.state;
    let count = this.props.store.count;
    return (
      <div style={{ width: 400, margin: '100px auto' }}>
        <p>同步</p>
        <h2>
          <button onClick={this.de}>-</button> {count} <button onClick={this.add}>+</button>
        </h2>
        <hr />
        <p>异步</p>
        <h2>
          <button onClick={this.asyncDe}>-</button> {count} <button onClick={this.asyncAdd}>+</button>
        </h2>
        <span>
          <Rate tooltips={desc} onChange={this.handleChangeRate} value={value} />
          {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
        </span>
        <DatePicker onChange={this.handleChange} />
        <div style={{ marginTop: 20 }}>
          当前日期：{date ? date.format('YYYY-MM-DD') : '未选择'}
        </div>
      </div>
    );
  }
}
export default App;

